<template>
  <div class="allBox">
    <div class="topBox">
      <span>
        <Icon style="vertical-align: -8px" size="30" color="#2D61F4" type="ios-list-box-outline" />
        <!-- <Icon size="30" color="#2D61F4" type="md-list-box" /> 
        <Icon size="30" color="#2D61F4" type="ios-list-box" />
        <Icon size="30" color="#2D61F4" type="ios-paper-outline" /> -->
        {{ infoVal.tenantName }}（编号：{{ infoVal.tenantCode }}）- {{ infoVal.tenantStatusName }}
      </span>
      <span @click="proTrans">项目转交</span>
    </div>
    <div class="detailsBox">
      <Tabs v-model="detailsTabVal" @on-click="getBoxTab" :animated="false" type="card">
        <TabPane label="项目信息" name="1">
          <div class="sureBox">
            <h3 class="title">
              项目信息
              <span @click="proInfoChange">变更</span>
            </h3>
            <div clang="infoBox">
              <dt-info :label-width="120" ref="proInfo"></dt-info>
            </div>
            <h3 class="title">
              项目备注
              <span @click="remarkChange">编辑</span>
            </h3>
            <div clang="infoBox">
              <span>{{ infoVal.remark || '-' }}</span>
            </div>
          </div>
        </TabPane>

        <TabPane label="项目套餐" name="2">
          <div class="sureBox">
            <h3 class="title">
              项目有效期
              <span @click="validityChange">变更</span>
            </h3>
            <div clang="infoBox">
              <dt-info :label-width="120" ref="proInfo2"></dt-info>
            </div>
            <h3 class="title">
              功能包
              <span @click="packageChan">变更</span>
            </h3>
            <Tabs v-model="permissionVal" @on-click="getTab" type="card">
              <TabPane label="期内套餐" name="1">
                <pro-package :packageVal="duringPackage"></pro-package>
              </TabPane>
              <TabPane label="期外套餐" name="2">
                <pro-package :packageVal="extraPackage"></pro-package>
              </TabPane>
            </Tabs>
            <h3 class="title">
              加油包
              <span @click="accontChangeEvent">变更</span>
            </h3>
            <div clang="infoBox">
              <dt-info :label-width="120" ref="proInfo3"></dt-info>
            </div>
          </div>
        </TabPane>
        <TabPane label="变更记录" name="3">
          <alter-record ref="alterRecordRef"></alter-record>
        </TabPane>
      </Tabs>
    </div>
    <pro-transfer ref="proTransferRef" @successful="transferSuccessful"></pro-transfer>
    <pro-remark ref="proRemarkRef" @successful="remarkSuccessful"></pro-remark>
    <pro-info-edit ref="proInfoEditRef" @successful="infoSuccessful"></pro-info-edit>
    <package-change ref="packageChangeRef" @successful="packSuccessful"></package-change>
    <accont-change ref="accontChangeRef" @successful="accontSuccessful"></accont-change>
  </div>
</template>

<script setup>
  import { watch, onMounted, reactive, ref, nextTick } from 'vue'
  import { RouterView } from 'vue-router'
  import proTransfer from '../components/proTransfer.vue'
  import packageChange from '../components/packageChange.vue'
  import alterRecord from '../components/alterRecord.vue'
  import accontChange from '../components/accontChange.vue'
  import proInfoEdit from '../components/proInfoEdit.vue'
  import proRemark from '../components/proRemark.vue'
  import proPackage from '../components/package.vue'
  import apiMgr from '../biz/index.js'
  import { useRouter } from 'vue-router'
  import { editOpt, packageOpt, refuelingOpt } from './biz/proDetailsOpt'
  import dt from '@dt/dt'
  // 变更账号数
  const accontChangeRef = ref()

  const accontChangeEvent = () => {
    console.log(233)
    accontChangeRef.value.show(projectPackage.value)
  }
  // 变更功能包
  const packageChangeRef = ref()
  const packageChan = () => {
    packageChangeRef.value.show(projectPackage.value, pack.value)
  }

  // 变更项
  const infoChangeList = ref()

  // 项目套餐与变更
  const proInfo2 = ref()
  const validityChange = () => {
    proInfoEditRef.value.show(projectPackage.value, 2)
  }
  const projectPackage = ref({})
  const tenantPackageForWeb = async () => {
    const params = {
      tenantId: proId.value
    }
    try {
      const res = await apiMgr.tenantPackageForWeb(params)
      projectPackage.value = res
      console.log(projectPackage.value, 'vvvvvvvvv')
      proInfo2.value.init(new packageOpt(), projectPackage.value)
      proInfo3.value.init(new refuelingOpt(), projectPackage.value)
      getPackages()
    } catch (error) {
      console.log(error)
    }
  }
  //项目信息与变更
  const proInfo = ref()
  const infoVal = ref({})
  const proInfoChange = () => {
    proInfoEditRef.value.show(infoVal.value, 1)
  }
  const proDetailsById = async () => {
    const params = {
      tenantId: proId.value
    }
    try {
      const res = await apiMgr.tenantInformationForWeb(params)
      infoVal.value = res
      if (res) {
        proInfo.value.init(new editOpt(), infoVal.value)
      }
    } catch (error) {
      console.log(error)
    }
  }

  const proInfo3 = ref()
  const detailsTabVal = ref('1')
  const [proTransferRef, proInfoEditRef, proRemarkRef] = [ref(), ref(), ref()]
  const transferSuccessful = () => {
    proTransferRef.value.hide()
    proDetailsById()
  }
  const infoSuccessful = () => {
    proInfoEditRef.value.hide()
    if (detailsTabVal.value == 1) {
      proDetailsById()
    } else if (detailsTabVal.value == 2) {
      proRemarkRef.value.hide()
      tenantPackageForWeb()
    }
  }
  const accontSuccessful = () => {
    accontChangeRef.value.hide()
    tenantPackageForWeb()
  }
  const packSuccessful = () => {
    packageChangeRef.value.hide()
    tenantPackageForWeb()
  }
  const remarkSuccessful = () => {
    proRemarkRef.value.hide()
    proDetailsById()
  }

  const remarkChange = () => {
    proRemarkRef.value.show(infoVal.value)
  }

  const permissionVal = ref('1')
  const customerFootprintData = ref([])

  const proTrans = () => {
    proTransferRef.value.show(infoVal.value)
  }

  // const aa = ref()
  // function getformatData(sortData) {
  //   const groups = {}
  //   sortData.forEach((o) => {
  //     const group = JSON.stringify(o.dynamicDate)
  //     groups[group] = groups[group] || []
  //     groups[group].push(o)
  //   })
  //   return Object.keys(groups).map((group) => {
  //     return {
  //       customerDynamicDTOS: groups[group],
  //       date: groups[group][0].dynamicDate
  //     }
  //   })
  // }
  const alterRecordRef = ref()
  const getBoxTab = (val) => {
    console.log(val, 'tab')
    if (val == 1) {
      proDetailsById()
    } else if (val == 2) {
      tenantPackageForWeb()
    } else {
      alterRecordRef.value.show(proId.value)
    }
  }
  const getTab = () => {}
  const proId = ref()
  onMounted(() => {
    proId.value = useRouter().currentRoute.value.query.id
    if (proId.value) {
      proDetailsById()
    }
  })

  const pack = ref()
  const duringPackage = ref([])
  const extraPackage = ref([])
  const getPackages = () => {
    apiMgr.getPackages().then((res) => {
      pack.value = res //总包
      duringPackage.value = [] //期内
      extraPackage.value = [] //期外
      res.forEach((item) => {
        let flg = projectPackage.value.duringPackageIds.includes(item.id)
        if (flg) {
          duringPackage.value.push(item)
        }
      })
      res.forEach((item) => {
        let flg = projectPackage.value.extraPackageIds.includes(item.id)
        if (flg) {
          extraPackage.value.push(item)
        }
      })
    })
  }
</script>

<style scoped lang="scss">
  .allBox {
    .topBox {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border: 1px #ccc solid;
      background: #f7f4f4;
      padding: 20px 20px;
      line-height: 30px;
      font-size: 16px;
      span:last-child {
        cursor: pointer;
        color: #2d61f4;
        font-size: 14px;
      }
    }
    .detailsBox {
      margin-top: 20px;
      .formBox {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap; /* 设置换行 */
        > * {
          width: 49%;
        }
      }
      .sureBox {
        // max-height: 500px;
        // max-height: calc(100% - 200px);
        max-height: 70vh;
        overflow-x: hidden;
        overflow-y: auto;
        .title {
          position: relative;
          padding-left: 16px;
          margin: 10px 0;
          span {
            color: #2d61f4;
            cursor: pointer;
            font-size: 14px;
            font-weight: normal;
            margin-left: 10px;
          }
        }
        .title::before {
          content: '';
          width: 8px;
          height: 16px;
          background: #2d61f4;
          position: absolute;
          left: 0;
          top: 4px;
        }

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: wrap; /* 设置换行 */
          p {
            width: 49%;
            span {
            }
          }
        }
        .permissionCon {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: wrap; /* 设置换行 */
          .permissionBox {
            border: 1px #eee solid;
            width: 49%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 20px;
            margin-bottom: 10px;
            .checkCon {
              width: 20px;
            }
            .permiss {
              flex: 1;
              .p1 {
                font-size: 14px;
                font-weight: bold;
                span {
                  font-weight: normal;
                  color: #2d61f4;
                  cursor: pointer;
                }
              }
              .p2 {
                line-height: 2;
                margin-top: 10px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; /* 设置最大行数为2 */
                overflow: hidden;
                text-overflow: ellipsis; /* 文本超出显示省略号 */
              }
            }
          }
        }
      }
    }
  }

  .time_line_title {
    color: #194fe8;
    margin-bottom: 20px;
    font-size: 15px;

    span:nth-child(1) {
      display: inline-block;
      width: 200px;
      margin-right: 20px;
    }
  }

  .time_line_content {
    font-size: 15px;
  }
</style>
